HTMLify

const hourEl = document.querySelector(".hour");
const minuteEl = document.querySelector(".minute");
const secondEl = document.querySelector(".second");
const timeEl = document.querySelector(".time");
const dateEl = document.querySelector(".date");
const circleEl = document.querySelector(".circle");

const toggleBtn = document.querySelector(".toggle");

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

toggleBtn.addEventListener("click", (e) => {
  const html = document.querySelector("html");
  html.classList.toggle("dark");

  //1 Update button text based on current mode
  // METHOD 1
  toggleBtn.innerHTML = html.classList.contains("dark") ? "Light Mode" : "Dark Mode";

  // METHOD 2
  // if (html.classList.contains("dark")) {
  //   toggleBtn.innerHTML = "Light Mode";
  // } else {
  //   toggleBtn.innerHTML = "Dark Mode";
  // }

  // METHOD 3
  // if (html.classList.contains("dark")) {
  //   e.target.innerHTML = "Light Mode";
  // } else {
  //   e.target.innerHTML = "Dark Mode";
  // }
});

function setTime() {
  const time = new Date();
  const month = time.getMonth();
  const day = time.getDay();
  const date = time.getDate();
  const hours = time.getHours();
  const hoursForClock = hours % 12;
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();
  const ampm = hours >= 12 ? "PM" : "AM";

  hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 11, 0, 360)}deg)`;
  minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 59, 0, 360)}deg)`;
  secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 59, 0, 360)}deg)`;

  timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`;
  dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
}

const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};

setTime();
setInterval(setTime, 1000);